<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      body {
        font: 12px "simhei", Arial, Helvetica, sans-serif;
        margin: 0px;
        padding: 0px;
      }

      h1 {
        color: aqua;
        color: #00ff00;
        color: #00f;
        color: rgb(255, 0, 0);
        /* 4位10进制赋值 a为alpha透明度值越小越透明 */
        color: rgba(255, 0, 0, 0.5);
      }

      #d1 {
        width: 210px;
        height: 210px;
        background-color: aqua;
        background-image: url("../2.webp");
        background-size: 200px 200px;
        /* 禁止重复 */
        background-repeat: no-repeat;
        /* 设置背景图片的位置：横向偏移值/百分比 纵向偏移值/百分比 */
        background-position: 5px 5px;
        background-position: 50% 50%;
      }

      #d2 {
        width: 611px;
        height: 376px;
        background-color: #e8e8e8;
        background-size: 318px 319px;
        background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
        background-repeat: no-repeat;
        background-position: 93% 50%;
      }

      #d3 {
        width: 375px;
        height: 376px;
        background-color: #e8e8e8;
        background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img2.png");
        background-repeat: no-repeat;
        background-position: 80% 80%;
      }

      #top_ys1 {
        color: #333333;
        font-size: 32px;
        padding: 4px;
        margin-top: 39px;
        margin-left: 25px;
        margin-bottom: 12px;
        font-weight: lighter;
      }
    </style>
  </head>

  <body>
    <div id="d1">背景测试</div>
    <div id="d2"></div>
    <div id="d3">
      <div>
        <p id="top_ys1">颜值 框不住</p>
      </div>
    </div>
    <h1>颜色测试</h1>
  </body>
</html>
